<template>
	<div class="my_css">
		<el-icon v-if="isOvetFlow" :size="15">
			<ArrowLeft @click="pre" />
		</el-icon>
		
		<div class="the_tab_part" ref="theTabPart" id="theTabPart">
			<slot style="width: 100%;" name="child" :theVal="modelValue">
			</slot>
			<div :class="modelValue == index? 'active' : 'unActive'" v-for="(item, index) in props.list" :key="index" @click="changeTab(item,index)">
				<div>{{ item[filterKey] }}</div>
        		<div v-if="modelValue == index&&isBottomLine" class="tuo"></div>
			</div>
		</div>
		<el-icon v-if="isOvetFlow" :size="15">
			<ArrowRight @click="next" />
		</el-icon>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import emitter from '@/utils/eventbus';
type Props = {
	list?: any
	filterKey?: string
	filterValue?: string
    modelValue?:number|string
	isBottomLine?:boolean
}
let props = withDefaults(defineProps<Props>(), {
	list: [],
	filterKey: 'label',
	filterValue: 'value',
    modelValue:0,
	isBottomLine:false
})

// 判断元素是否溢出
let isOvetFlow = ref(false)
let emit = defineEmits(['update:modelValue','tabClick'])
// let current = ref(0)
let scrollHeight = null
let scrollTop = ref(0)
let theTabPart:any = ref()
let ele = null

onMounted(()=>{
    scrollHeight = document.body.clientHeight - document.body.scrollTop
    ele = theTabPart.value
	let ysq = setTimeout(()=>{
		if(theTabPart.value.scrollWidth>theTabPart.value.clientWidth){
			isOvetFlow.value = true
			clearTimeout(ysq)
		}
	},500)
})

const toChange = () =>{
	
	theTabPart.value.style.width = (Math.random()*10*100)+'px'
	console.log('dat',theTabPart.value.style.scrollWidth)
}

const pre = () =>{
    ele.scrollTo({left:scrollTop.value-scrollHeight,behavior:'smooth'})
    scrollTop.value = document.body.scrollTop
}

const next = () =>{
    ele.scrollTo({left:scrollTop.value+scrollHeight,behavior:'smooth'})
    scrollTop.value = document.body.scrollTop
}
const changeTab = (item,index) =>{
    emit('update:modelValue',item[props.filterValue])
    emit('tabClick',{...item,index:index})
}
</script>
<style scoped lang="scss">
.my_css{
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    line-height: 50%;
}

.the_tab_part {
	height: 50px;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.the_tab_part::-webkit-scrollbar{
    display:none
}
.unActive {
	display: inline-block;
	cursor: pointer;
	padding: 0 10px;
	box-sizing: border-box;
	height: 39px;
	line-height: 39px;
	border-radius: 8px;
	background: #f0f0f0;
	font-weight: 400;
	font-size: 14px;
	color: #707070;
	text-align: center;
	margin-right: 12px;
}
.active {
	display: inline-block;
	cursor: pointer;
	padding: 0 10px;
	box-sizing: border-box;
	height: 39px;
	line-height: 39px;
	border-radius: 8px;
	background: #ecf3fe;
	font-weight: 400;
	font-size: 14px;
	color: #0052d9;
	text-align: center;
	margin-right: 12px;
	position: relative;
}
.tuo{
	margin-top: 5px;
	width: 30px;
	height: 5px;
	position: absolute;
	bottom: -10;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 6px;
	background-color: #0052D9;
}
</style>
